.xmOrder{
    background-color: var(--themeColor);
    height: 100%;
    .navBar{
        background-color: #fff;
        color: #333;
        span{
          font-size: 16px;
        }
        .icon{
            color:#4ca3fb;
        }
    }
    .orderStatusNav {
        background-color: white;
        display: flex;
        height: 45px;
        border:1px solid #f8f8f8;
        .statusNavItem{
            flex:1;
            text-align: center;
            line-height: 40px;
            color: #646566;
        }
        .active{
          color: #000;
          border-bottom: 3px solid indianred;
        }
      }
      
      .orderList {
        height: calc(100vh - 140px);
        overflow-y: scroll;
        .orderListItem{
            .allOrderItems {
                margin-top: 5px;
                background-color: white;
                border:1px solid #f8f8f8;
                padding-left: 20px;
                padding-right: 20px;
                .allOrderTop {
                    height: 70px;
                    display:flex;
                    justify-content: space-between;
                  .orderTopLeft {
                      padding-top: 15px;
                      line-height: 20px;
                      text-align: left;
                    p {
          
                    }
                  }
          
                  .orderTopRight {
                    line-height: 50px;
                    color:#9a9b9d
                  }
                }
          
                .allOrderMid {
                    padding-top: 8px;
                    padding-bottom: 8px;
                    display: flex;
                    border-top: solid 1px #f8f8f8;
                  .orderMidLeft {
                      flex:1;
                    img {
                        width: 90px;
                        height: 90px;
                        border-radius: 5px;
                    }
                  }
          
                  .orderMidRight {
                      display: flex;
                      flex-direction: column;
                      justify-content: space-between;
                      flex:3;
                    .MidRightTop {
                        font-size: 12px;
                        float: left;
                        padding-left: 10px;
                        text-align: left;
                    }
          
                    .MidRightMid {
                        font-size: 12px;
                        float: left;
                        padding-left: 10px;
                        text-align: left;
                        position: relative;
                        top:-20px
                    }
          
                    .MidRightBottom {
                        display: flex;
                        padding-left: 10px;
                        justify-content: space-between;
                        align-items: center;
                        padding-bottom: 3px;
                      .RightBottomLeft {
                        font-size: 16px;
                      }
          
                      .RightBottomRight {
                        font-size: 12px;
                        color: #9a9b9d;
                      }
                    }
                  }
                }
          
                .allOrderBottom {
                    height: 35px;
                    line-height: 35px;
                  span {
                      font-size: 16px;
                    display:inline-block;
                    float: right;
                  }
                }
          
                .allOrderOprates {
                    border-top: #f8f8f8 1px solid;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    position: relative;
                  .cancelOrder {
                      position: absolute;
                      right: 85px;
                    height: 30px;
                    width: 70px;
                    border-radius: 3px;
                    border: 1px solid #ddd;
                    font-size: 12px;
                    text-align: center;
                    line-height: 28px;
                  }
                //   .isCancel {
                //     position: absolute;
                //     right: 85px;
                //   height: 30px;
                //   width: 70px;
                //   border-radius: 3px;
                //   border: 1px solid #ddd;
                //   font-size: 12px;
                //   text-align: center;
                //   line-height: 28px;
                //   background-color: #ddd;
                // }
                  .payNow {
                    position: absolute;
                    right: 0px;
                    height: 30px;
                    width: 70px;
                    border-radius: 3px;
                    background-color: #ee0a24;
                    color: white;
                    font-size: 12px;
                    text-align: center;
                    line-height: 30px;
                  }
                }
              }
        
           .bottomTips{
            line-height: 45px;
             color: #9a9b9d;
           } 
        }
        .hidden{
            display: none;
        }
      }
}
